<template>
  <div class="refund-main-box">
    <div class="refund-chart-box">
      <div id="echart-box" class="echart-box">
      </div>
      <div class="info-box">
        <el-descriptions direction="vertical" column="2" :title="project_name">
          <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userphone }}</el-descriptions-item>
          <el-descriptions-item label="还款启动时间">{{ refund_start }}</el-descriptions-item>
          <el-descriptions-item label="项目状态">
            <el-tag :type="refundInfoType()" size="medium">{{ refund_state }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="地址">{{ useraddress }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="refund-table-box">
      <el-table
          :data="RefundFileList"
          border
          style="width: 100%">
        <el-table-column
            prop="refundId"
            label="编号"
            width="70">
        </el-table-column>
        <el-table-column
            prop="projectName"
            label="项目名称"
            width="240">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="refundTime"
            label="还款时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="refundPrice"
            label="还款金额"
            width="100">
        </el-table-column>
        <el-table-column
            prop="state"
            label="还款状态"
            width="100">
          <template #default="{ row }">
            <el-tag effect="dark" :type="refundType(row.state)">
              {{ row.state }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="90">
          <template slot-scope="scoped">
            <el-button v-if="operationType && checkIfShow(scoped.row)" @click="toDialog(scoped.row)" type="text"
                       size="small">去还款
            </el-button>
            <el-button v-if="!operationType && checkIfShow(scoped.row)" @click="toRemind(scoped.row)" type="text"
                       size="small">催促还款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
          title="提示"
          :visible="Visible"
          width="30%"
          center>
        <span>您正在向贷款项目：{{ project_name }}，还款金额：{{ dialogPrice }}，请确认支付！</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="toRefund">确 定</el-button>
            </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "RefundInfo",
  data() {
    return {
      Visible: false,
      applyId: 0,
      project_name: "",
      dialogPrice: "",
      refundLogId: 0,
      username: "",
      userphone: "",
      useraddress: "",
      refund_start: "",
      refund_state: "",
      operationType: false,
      RefundFileList: []
    }
  },
  mounted() {
    if(this.$store.getters.getUser.role==='student'){
      this.operationType = true
    }
    this.applyId = this.$route.query.applyId
    this.updateRefundState()
    this.getEChartData()
    this.getRefundLogData()
    this.getRefundInfo()
  },
  methods: {
    getEChartData() {
      let Chart = this.$echarts.init(document.getElementById("echart-box"));
      let option = {
        title: {
          left: 'top'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '还款数据：',
            type: 'pie',
            radius: '60%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.$axios.get("/adminFinancial/getRefundData?applyId=" + this.applyId).then(res => {
        if (res.data.code === 200) {
          option.series[0].data = res.data.data
          Chart.setOption(option);
        }
      })
    },
    getRefundLogData() {
      this.$axios.get("/adminFinancial/getRefundLog?applyId=" + this.applyId).then(res => {
        if (res.data.code === 200)
          this.RefundFileList = res.data.data
      })
    },
    getRefundInfo() {
      this.$axios.get("/adminFinancial/getRefundInfo?applyId=" + this.applyId).then(res => {
        this.project_name = res.data.data.project_name
        this.username = res.data.data.username
        this.userphone = res.data.data.userphone
        this.useraddress = res.data.data.useraddress
        this.refund_state = res.data.data.refund_state
        this.refund_start = res.data.data.refund_start
      })
    },
    toDialog(row){
      this.dialogPrice = row.refundPrice
      this.refundLogId = row.refundId
      this.Visible = true
    },
    toRefund() {
      this.$axios.post("/financial/paymentDue?refundLogId="+this.refundLogId).then(res => {
        if (res.data.code === 200) {
          this.$message.success("还款成功")
          this.getRefundLogData()
          this.getEChartData()
          this.Visible = false
        }
      })
    },
    toRemind(row) {
      this.$message.success("已向当前用户发送消息提醒，请等待用户还款")
      this.$axios.post("/message/sendMessage",{
        author: parseInt(this.$store.getters.getUser.id),
        applyId: parseInt(this.applyId),
        message: "您的贷款项目："+ this.project_name+"，已到达还款期限，为保证您良好的信用记录，请及时还款，还款金额："+row.refundPrice+"。"
      })
    },
    checkIfShow(row){
      if (row.refundId === this.RefundFileList[0].refundId){
        return true
      }
      return false
    },
    updateRefundState(){
      this.$axios.post("/adminFinancial/updateRefundState?applyId="+this.applyId)
    },
    refundType(row){
      if (row === "未偿还")
        return ""
      return "danger"
    },
    refundInfoType() {
      if (this.refund_state === "还款已完成")
        return "success"
      if (this.refund_state === "还款已启动")
        return ""
      return "warning"
    }
  }
}
</script>

<style scoped>
.refund-main-box {
  display: flex;
  flex-direction: column;
  width: 985px;
  height: 800px;
  background-color: #ffffff;
}

.refund-chart-box {
  display: flex;
  flex-direction: row;
  width: 985px;
  height: 400px
}

.echart-box {
  width: 500px;
  height: 400px;
}

.info-box {
  width: 485px;
  height: 400px;
  padding-top: 80px;
}

.refund-table-box {
  height: 400px;
  overflow-y: auto;
}
</style>